<template>
  <el-container>
    <!-- 头部容器 -->
    <el-header>
      <!-- logo和标题容器 -->
      <div>
        <img src="../assets/logo.png" alt="logo"/>
        <span>电商后台管理系统</span>
      </div>
      <!-- 退出按钮 -->
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 主体容器 -->
    <el-container>
      <!-- 左侧边容器 -->
      <el-aside :width="isCollapse?'64px':'200px'">
        <!-- 左侧边按钮，控制菜单折叠(只显示图标)或展开 -->
        <div class="tag-menu" @click="isCollapse = !isCollapse">|||</div>
        <!-- 左侧边菜单 -->
        <!-- 设置unique-opened只允许一个主菜单被打开 -->
        <!-- collapse-transition取消折叠动画 解除卡顿 -->
        <!-- default-active 设置默认选中，比如刷新页面后，users页面默认选中用户列表 -->
        <el-menu background-color="#333744" text-color="#fff"
                 active-text-color="#ffd04b" unique-opened router
                 :collapse="isCollapse" :collapse-transition="false"
                 :default-active="$route.path">
          <!-- 1级导航 容器  -->
          <!-- index不能为数字，+''转为字符串  -->
          <el-submenu :index="item.id + ''" v-for="item in menu_list">
            <!-- 1级导航 标题和图标 -->
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.authName}}</span>
            </template>
            <!-- 2级导航 容器 -->
            <el-menu-item :index="'/' + item1.path" v-for="item1 in item.children">
              <!-- 2级导航 标题和图标 -->
              <template slot="title">
                <i class="el-icon-s-operation"></i>
                <span>{{item1.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧主体容器 -->
      <el-main>
        <!-- 用于加载home页面的子页面 -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        // menu的数据
        menu_list: [],
        // 判断menu是否需要折叠
        isCollapse: false
      }
    },
    methods: {
      // 退出按钮点击事件
      logout() {
        localStorage.setItem('isLogin', '0')
        this.$ajax.post('logout/').then(
                res => this.$router.push('/login')
        )
      },
      // 获取menu内容的函数，在created中调用
      getMenu() {
        this.$ajax.get('menu/').then(res => {
          this.menu_list = res.data.data
        })
      }
    },
    /* 生命周期函数beforeCreate
    *  浏览器退出后，保存在本地的localStorage被清除
    *  在beforeCreate，向服务器发送请求验证session是否登录
    *  如果服务器验证失败，则跳转到login
    *  防止人为修改isLogin值进入home页面
    **/
    beforeCreate() {
      // 发送get请求验证是否登录，如果未登录则跳转/login
      this.$ajax.get('login/').then(res => {
        // 失败则跳转login页面
        if (res.data !== 'OK'){
          localStorage.setItem('isLogin', '0')
          this.$router.push('/login')
        }
      }).catch(err => {
        console.error(err)
        // 如果连接服务器失败，保险起见强行跳转到登录页
        localStorage.setItem('isLogin', '0')
        this.$router.push('/login')
      })
    },
    created() {
      this.getMenu()
    }
  }
</script>

<style lang="less" scoped>
  .el-header {
    background-color: #32383A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    user-select: none;

    div {
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #fff;

      img {
        height: 50px;
      }

      span {
        margin-left: 15px;
      }
    }
  }

  .el-aside {
    background-color: #333744;
    // 禁止选中字体，防止点击时太快有字体会被选中
    user-select: none;
    transition: .6s;

    .tag-menu {
      font-size: 10px;
      background-color: #465164;
      text-align: center;
      line-height: 20px;
      width: 100%;
      // 设置字体间距，防止|||挨太近
      letter-spacing: 0.2em;
    }
  }

  .el-menu {
    border-right: none;
  }

  .el-main {
    background-color: #E8ECF0;
    overflow-y: auto;
  }

  .el-container {
    width: 100%;
    height: 100%;
  }
</style>